﻿<!--
    
 @Name：不落阁整站模板源码
 @Author：Absolutely
 @Site：http://www.lyblogs.cn

 -->

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=gb2312">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>relative - 点点滴滴 - 时光轴</title>
    <link href="LayuiBlog/images/favicon.ico"  rel="icon" type="image/x-icon" />
    <link rel="shortcut icon" href="LayuiBlog/images/favicon.ico" type="image/x-icon">
    <!--Layui-->
    <link href="/LayuiBlog/plug/layui/css/layui.css" rel="stylesheet" />
    <!--font-awesome-->
    <link href="/LayuiBlog/plug/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <!-- animate.css -->
    <link href="/LayuiBlog/css/animate.min.css" rel="stylesheet" />
    <!--全局样式表-->
    <link href="/LayuiBlog/css/global.css" rel="stylesheet" />
    <!-- 本页样式表 -->
    <link href="/LayuiBlog/css/timeline.css" rel="stylesheet" />
    <link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
</head>
<body>
    <!-- 导航 -->
    <nav class="blog-nav layui-header">
        <div class="blog-container">
            <!-- QQ互联登陆 -->
            <!--            <a href="javascript:;" class="blog-user">-->
            <!--            <i class="fa fa-qq" >登录</i>-->
            <!--            </a>-->

            <!--            <a href="javascript:;" class="blog-user layui-hide">-->
            <!--                <img src="../images/Absolutely.jpg" alt="Absolutely" title="Absolutely" />-->
            <!--            </a>-->
            <!-- 不落阁 -->
            <a class="blog-logo" href="/home">relative</a>
            <!-- 导航菜单 -->
            <ul class="layui-nav" lay-filter="nav">
                <li class="layui-nav-item ">
                    <a href="/home"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/article"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/resource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="/timeline"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
                </li>
                <li class="layui-nav-item adminUserCss" style="float: right">
                    <a href="/register">注册</a>
                </li>
                <li class="layui-nav-item adminUserCss" style="float: right">
                    <a href="/login">登录</a>
                </li>
            </ul>


            <!-- 手机和平板的导航开关 -->
            <a class="blog-navicon" href="javascript:;">
                <i class="fa fa-navicon"></i>
            </a>
        </div>
    </nav>
    <!-- 主体（一般只改变这里的内容） -->
    <div class="blog-body">
        <div class="blog-container">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
                <a href="home.html" title="网站首页">网站首页</a>
                <a href="timeline.html" title="点点滴滴">点点滴滴</a>
                <a><cite>时光轴</cite></a>
            </blockquote>
            <div class="blog-main">
                <div class="child-nav shadow">
                    <span class="child-nav-btn child-nav-btn-this">时光轴</span>
                    <span class="child-nav-btn">笔记墙</span>
                </div>
                <div class="timeline-box shadow">
                    <div class="timeline-main">
                        <h1><i class="fa fa-clock-o"></i>时光轴<span> —— 记录生活点点滴滴</span></h1>
                        <div class="timeline-line"></div>
                        <div class="timeline-year">
<!--                            <h2 class="animated fadeInLeft "><a class="yearToggle" href="javascript:;" ></a><i class="fa fa-caret-down fa-fw"></i>2020年</h2>-->
                            <div class="timeline-month">
<!--                                <h3 class=" animated fadeInLeft"><a class="monthToggle" href="javascript:;">4月</a><i class="fa fa-caret-down fa-fw"></i></h3>-->
                                <ul >
                                    <li class=" " th:each="memory:${memorys.getList()}" >
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date" th:text="${#dates.format(memory.getCreateTime(),'yyyy-MM-dd HH:mm')}">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
                                        <div class="content animated fadeInRight" th:utext="${memory.getMemoryContent()}">该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！</div>
                                        <div class="clear"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <h1 style="padding-top:4px;padding-bottom:2px;margin-top:40px;"><i class="fa fa-hourglass-end"></i>THE END</h1>
                    </div>
                    <!-- 分页-->
                    <div class="page" style="text-align: center;">
<!--                        <a class="layui-btn layui-btn-sm" data-page="0"-->
<!--                           th:href="@{/timeline(pageNum=${memorys.isHasPreviousPage()}?${memorys.prePage}:1)}">上一页</a>-->
<!--                        <a href="" th:href="@{/timeline(pageNum=1)}" th:if="${memorys.pages} >= 1" class="layui-btn layui-btn-primary">1</a>-->
<!--                        <a href="" th:href="@{/timeline(pageNum=2)}" th:if="${memorys.pages} >= 2" class="layui-btn layui-btn-primary">2</a>-->
<!--                        <a href="" th:href="@{/timeline(pageNum=${memorys.isHasNextPage()}?${memorys.nextPage}:${memorys.pages})}"-->
<!--                           class="layui-btn layui-btn-sm">下一页</a>-->
                        <span class="layui-btn layui-btn-primary"><b th:text="'共'+${memorys.getPages()}+ ' 页'"></b></span>
                        <a class="layui-btn layui-btn-sm" data-page="0"
                           th:if="${memorys.hasPreviousPage}"
                           th:href="@{/timeline(pageNum=${memorys.isHasPreviousPage()}?${memorys.prePage}:1)}">上一页</a>
                        <a th:if="${memorys.getPages()} gt 0" th:href="@{'timeline?pageNum=' + ${i}}"  th:each="i :${#numbers.sequence(1, memorys.getPages())}" th:text="${i}"  th:class="${memorys.getPageNum() == i}? 'curPage layui-btn layui-btn-primary' :'layui-btn layui-btn-primary' "></a>
                        <a href="" th:href="@{/timeline(pageNum=${memorys.isHasNextPage()}?${memorys.nextPage}:${memorys.pages})}"
                           class="layui-btn layui-btn-sm">下一页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 底部 -->
    <footer class="blog-footer">
<!--        <p><span>Copyright</span><span>&copy;</span><span>2017</span><a href="http://www.lyblogs.cn">不落阁</a><span>Design By LY</span></p>-->
<!--        <p><a href="http://www.miibeian.gov.cn/" target="_blank">蜀ICP备16029915号-1</a></p>-->
    </footer>
    <!--侧边导航-->
    <ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
        <li class="layui-nav-item">
            <a th:href="@{/home}"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
        </li>
        <li class="layui-nav-item layui-this">
            <a th:href="@{/article}"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{/resource}"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{timeline}"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{/about}"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
        </li>
    </ul>
    <!--分享窗体-->
    <div class="blog-share layui-hide">
        <div class="blog-share-body">
            <div style="width: 200px;height:100%;">
                <div class="bdsharebuttonbox">
                    <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                    <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                    <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                    <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="demo">
        <div id="player">
        </div>
    </div>
    <!--遮罩-->
    <div class="blog-mask animated layui-hide"></div>
    <!-- layui.js -->
    <script src="/LayuiBlog/plug/layui/layui.js"></script>
    <!-- 全局脚本 -->
    <script src="/LayuiBlog/js/global.js"></script>
    <!-- 本页脚本 -->
    <script type="text/javascript">
        layui.use('jquery', function () {
            var $ = layui.jquery;

            $(function () {
                $('.monthToggle').click(function () {
                    $(this).parent('h3').siblings('ul').slideToggle('slow');
                    $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
                });
                $('.yearToggle').click(function () {
                    $(this).parent('h2').siblings('.timeline-month').slideToggle('slow');
                    $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
                });
            });
        });
    </script>
    <script src="LayuiBlog/js/BGM.js"></script>
</body>
</html>